<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>音乐列表</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/list.css">
	</head>
	<body>
		<!-- f1 -->
		<div class="f1">
			<img src="img/Search.svg" alt="">
			<p>最近</p>
			<img src="img/dot.png" alt="">
		</div>
		<!-- f2 -->
		<ul class="f2">
			<li style="color: #fff;">单曲</li>
			<li>专辑</li>
			<li>详情</li>
			<li>歌词</li>
			<li>歌词本</li>
		</ul>
		<!-- 渐变线 -->
		<div class="line"></div>
		<!-- f3 歌曲列表 -->
		<ul class="f3">
			<li>
				<img src="img/play1.png" alt="">
				<div>
					<p>樱花樱花想见你</p>
					<p>满汉全席音乐团队</p>
				</div>
				<span>3:41</span>
			</li>
			<div class="line"></div>
			<li>
				<img src="img/play1.png" alt="">
				<div>
					<p>樱花樱花想见你</p>
					<p>满汉全席音乐团队</p>
				</div>
				<span>3:41</span>
			</li>
			<div class="line"></div>
			<li>
				<img src="img/play1.png" alt="">
				<div>
					<p>樱花樱花想见你</p>
					<p>满汉全席音乐团队</p>
				</div>
				<span>3:41</span>
			</li>
			<div class="line"></div>
			<li>
				<img src="img/play1.png" alt="">
				<div>
					<p>樱花樱花想见你</p>
					<p>满汉全席音乐团队</p>
				</div>
				<span>3:41</span>
			</li>
			<div class="line"></div>
			<li>
				<img src="img/pause1.png" alt="">
				<div>
					<p>樱花樱花想见你</p>
					<p>满汉全席音乐团队</p>
				</div>
				<span>3:41</span>
			</li>

		</ul>
		<!-- f4 底部导航 -->
		<ul class="f4">
			<li>
				<a href="#">
					<img src="img/music.png" alt="">
					<p>音乐</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/music_bar.svg" alt="">
					<p>音乐馆</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/music_cate.svg" alt="">
					<p>音乐分类</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/Record.svg" alt="">
					<p>我的MV</p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="img/Profile.svg" alt="">
					<p>个人中心</p>
				</a>
			</li>
		</ul>
	</body>
</html>
<script>
	// 给f2下的每一个li绑定点击事件
	// 获取这组li标签
	var aLi = document.querySelectorAll('.f2 li')
	// console.log(aLi)
	// 循环获取每一个
	for(var i=0;i<aLi.length;i++) {
		// console.log(i, aLi[i])
		// 帮点点击事件
		aLi[i].onclick = function() {
			// 让其它的li变成白色半透明
			for(var i=0;i<aLi.length;i++) {
				aLi[i].style.color = 'rgba(255,255,255,0.5)'
			}
			// 让当前的文字颜色变为白色
			this.style.color = '#fff'
		}
	}
	
	// 获取到这组播放的图片
	var aImg = document.querySelectorAll('.f3 li img')
	// console.log(aImg)
	// 给播放添加点击事件
	for(let i=0;i<aImg.length;i++) {
		// 声明变量记录状态
		let play = false
		aImg[i].onclick = function() {
			// 如果是播放状态，点击变成暂停状态
			// 否则是暂停状态，点击变成播放状态
			if(play) {
				this.src = 'img/pause1.png'
				play = false
			} else {
				this.src = 'img/play1.png'
				play = true
			}
		}
	}
	
</script>
